<template>
  <div class="tasklist">
    <div
      :class="{ task: true, unfinished: !item.status }"
      v-for="(item, index) in store.tasklist"
      :key="index"
    >
      <input type="checkbox" @click="change(item.id)" />
      <span> {{ item.name }} </span>
      <span @click="del(index)">删除</span>
    </div>
  </div>
</template>

<script setup>
//从对应模块的文件中导入useCounterStore方法
import { useCounterStore } from "../stores/counter";
//调用useCounterStore方法 获取store对象
var store = useCounterStore();
var change = (id) => {
  store.changeTaskStatus(id);
};
var del = (index)=>{
  store.delTask(index);
}
</script>

<style scoped>
.tasklist .task {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  background-color: rgb(33, 146, 216);
  color: white;
  margin: 10px;
}
.tasklist .task.unfinished {
  background-color: red;
}
</style>